<template>
	<!-- 订单详情 -->
	<view class="goodsinfo">
		<view class="oderaddress">
			<view class="photitle">
				<view class="ordername">
					{{orderList.name}}
				</view>
				<view class="orderpho">
					{{orderList.photo}}
				</view>
			</view>
			<view class="orderdress">
				{{orderList.address}}
			</view>
		</view>
		<view class="odergoodinfo">
			<view class="ordernum">
				<text style="margin-left: 20px;">共1件商品</text>
			</view>
			<view class="goodsinfo">
				<view class="image">
				<image src="../../static/order/luimg.png" style="width: 90px;height: 90px;"></image>
				</view>
				<view class="goodsinfos">车载小鹿首饰架摆件鹿角树形耳钉首饰展示架耳环架手链饰品收纳首饰挂件 白色

					<view style="color:#dcdcdc ;">默认</view>
					<view style="color: red;">￥{{orderList.price}}</view>
				</view>
				<view class="goodsprice">
					<text> x{{orderList.num}} </text>
					<view class="pingjia" style="width: 50px;color: black;">
					</view>
				</view>
			</view>
			<view class="peasenpht" @click="photoclick">

				<u-icon name="kefu-ermai" size="16" color="red"></u-icon>
				<text>联系客服</text>

			</view>
		</view>
		<view class="oderanumTime">
			<view class="ordernumber">
				<view class="ordernumbertitle">
					订单编号：
				</view>
				<view class="ordernumbertitles">
					<view class="ordernumbernum" style="color: #dcdcdc;">
						编号{{orderList.photo}}
					</view>
					<view @click="ordernumberbtn" style="margin-left: 120px;border: 1px solid #ccc;
					width:50px;height: 25px;line-height:25px;border-radius: 5px;text-align: center;" >
						复制</view>

				</view>
			</view>
			<view class="orderTime">
				<view class="orderTimetitle">
					下单时间：
				</view>
				<view class="ordernumbertitle" style="color: #dcdcdc;padding-left: 30px;">
					2023-03-02-17：12：22
				</view>
			</view>
			<view class="orderstatue">
				<view class="orderstatuetitle">
					支付状态：
				</view>
				<view class="orderstatues" style="color: #dcdcdc;padding-left: 160px;">
					已支付
				</view>
			</view>
			<view class="orderplace">
				<view class="orderstatuestitle">
					支付方式：
				</view>
				<view class="orderstatuessum" style="color: #dcdcdc;padding-left: 150px;">
					余额支付
				</view>
			</view>
		</view>
		<!-- 商品总价 -->
		<view class="oderaddtotal" >
				<view class="oderaddtotal1">
						<view class="oderaddtotal1-title">
								商品总价：
						</view>
						<view class="oderaddtotal1-price">
								￥{{orderList.total}}
						</view>
				</view>
				<view class="oderaddtotal2">
					<view class="s">
						实付款：
					</view>
					<view style="color: red;">
						￥{{orderList.total}}
					</view> 
				</view>
		</view>
		
		
		</view>
	</view>
	

	
</template>

<script>
	import {getorderlist} from '../../network/order.js'
	export default {
		props: {
			orderList: {
				type: Object,
				default: () => {

				}
			}
		},
		data(){
			return{
				
			}
		},
		methods: {
			photoclick() {

			},
			ordernumberbtn() {

			}
		},
		async onLoad() {
			let res=await getorderlist()
			console.log("待sss发货",res.data.list);
		   this.unreclist=res.data.list
		 console.log("待发cc货",this.unreclist);
		}


	}
</script>

<style lang="scss">
	.goodsinfo {

		width: 90%;
		margin: auto;

		.oderaddress {
			background-color: white;
			border-radius: 10px;
			padding-left: 20px;
			padding-bottom: 10px;

			.photitle {
				display: flex;

				view {
					margin-top: 10px;
					height: 30px;
					margin-right: 30px;
				}

			}

			.orderdress {
				color: #dcdcdc;
			}

		}

		.odergoodinfo {
			background-color: white;
			border-radius: 10px;
			margin: 10px 0px;

			.ordernum {
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #ccc;
			}

			.goodsinfo {
				display: flex;
				padding: 8px 0px;

				.goodsinfos {
					font-size: 14px;
					padding: 0px 8px;
				}
			}

			.goodsprice {
				color: #dcdcdc;
			}
		}

		.peasenpht {
			padding: 5px 100px;
			display: flex;
			border-top: 1px solid #ccc;
			border-radius: 10px;
			color: red;

		}
     .oderanumTime{
		 background-color: white;
		 border-radius: 10px;
		 margin: 10px 0px;
		 padding: 10px 10px;
		 .ordernumbertitles{
			 padding-top: 5px;
			 display: flex;
			 font-size: 14px;
		 }
		 .orderTime ,.orderplace,.orderstatue {
			 display: flex;
			  padding-top: 5px;
		 }
	 }
      .oderaddtotal{
		 background-color: white;
		 border-radius: 10px;
		 margin: 10px 0px;
		 padding: 10px 10px;
		 .oderaddtotal1{
			  display: flex;
			  .oderaddtotal1-price{
				  color: #ccc;
				  margin-left: 150px;
			  }
		 }
		 .oderaddtotal2{
			 display: flex;
			 height:40px;
			 margin-top: 10px;
			 padding-left: 165px;
			 font-size: 20px;
		 }
	  }
	}
</style>
